import React, { Component } from 'react';
import {Layout} from 'antd'
import logo from './logo.png'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import RouterView from './layout/routerView'
import MyMenu from './route/menu'

const {Header,Content,Sider} = Layout;

class App extends Component {
  state ={
    collapsed:false,
  }
  toggle=()=>{
    this.setState({
      collapsed:!this.state.collapsed
    })
  }
 
  render() {
    return (
      <Layout>
  
        <Sider collapsible collapsed={this.state.collapsed} trigger={null}>
          <div className='logo'>
            <img src={logo} style={{width:'24px'}} alt=''/>
          {this.state.collapsed ? '' : '嗨购管理系统'}
          </div>
            <MyMenu/>
          </Sider>
        <Layout>
          <Header className='my-header'>
          {this.state.collapsed ? (
              <MenuUnfoldOutlined style={{ fontSize: '24px' }} onClick={this.toggle} />
            ) : (
              <MenuFoldOutlined style={{ fontSize: '24px' }} onClick={this.toggle} />
            )}
            </Header>
          <Content  className='my-content'>
            <RouterView />
          </Content>
        </Layout>
      </Layout>
     
    );
  }
}

export default App;
